import React, { Component } from 'react';
import { Input, Button, List, Divider, message } from 'antd';
import { SearchOutlined, PlayCircleOutlined } from '@ant-design/icons';
// 导入样式文件
import '../assets/css/search.css';

export default class Search extends Component {
    constructor() {
        super();
        this.state = {
            // 歌曲列表
            songList: [],
            // 热门搜索列表
            hotKeywords: [],
            // 表单数据模型
            keywords: ''
        }
    }
    render() {
        return (
            <div className="search-container">
                <div className="section">
                    <Input value={this.state.keywords} onKeyUp={(e) => this.submit(e)} onChange={(e) => this.inputUpdate(e)} size="large" placeholder="请输入搜索关键词" prefix={<SearchOutlined />} />
                </div>
                <Divider />
                {/* 搜索热词 */}
                <div className="section hot-keywords">
                    {
                        this.state.hotKeywords.map(item => (
                            <Button onClick={() => this.clickHandle(item.first)} key={item.first} type="default" shape="round">{item.first}</Button>
                        ))
                    }
                </div>
                {/* 搜索结果 */}
                <List
                    size="large"
                    dataSource={this.state.songList}
                    renderItem={item => <List.Item
                        onClick={()=>this.props.history.push(`/play/${item.id}`)}
                        actions={[<PlayCircleOutlined style={{ fontSize: 24 }} />]}
                    >{item.name}</List.Item>}
                />
            </div>
        )
    }

    componentWillMount() {
        this.getHotKeywords();
    }

    // 监听用户输入
    inputUpdate(event) {
        const keywords = event.target.value;
        // 更新数据模型
        this.setState({ keywords });
    }
    // 提交表单
    submit(event) {
        if (event.keyCode === 13) {
            // 发送数据请求
            this.search();
        }
    }
    // 热门搜索点击事件处理函数
    clickHandle(keywords) {
        // 1-更新搜索关键词
        this.setState({ keywords }, () => {
            // 2-进行搜索
            this.search();
        });

    }

    // 根据关键词进行搜索
    async search() {
        const keywords = this.state.keywords.trim();
        if (keywords === '') {
            return message.error('请输入搜索关键词');
        }
        const res = await this.$http.get('/search', { params: { keywords } });
        if (res.code === 200) {
            // 更新搜索结果
            this.setState({ songList: res.result.songs });
        }
    }

    // 获取热门搜索
    async getHotKeywords() {
        const res = await this.$http.get('/search/hot');
        if (res.code === 200) {
            // 更新数据
            this.setState({ hotKeywords: res.result.hots });
        }
    }

    // 组件即将卸载的时候, 自动执行
    componentWillUnmount(){
        // 对this.setState()方法的功能进行重写
        this.setState=()=>false;
    }
}
